import React, { useState, useEffect } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { Button, Image, Input, Cell, Dialog } from "@nutui/nutui-react-taro";

import { getUserInfo, getMachineInfo } from "../../services/account";
import { showErrorToast, showSuccToast } from "../../utils/util";

import IconAdd from "../../assets/imgs/my/icon-machine.svg";
import IconKefu from "../../assets/imgs/my/icon-kefu.svg";

import IconArrowRight from "../../assets/imgs/home/icon-arrow-r.svg";

import "./index.scss";

function My() {
  const [showModal, setShowModal] = useState(0);

  // 获取-用户信息
  const postUserInfo = async () => {
    const res = await getUserInfo();
    // console.log(`res:${JSON.stringify(res)}`);
    Taro.setStorageSync("userInfo", res.data);
  };

  // 添加-机器
  const postAddMachine = async (machineCode) => {
    const payload = {
      machineCode,
    };
    const res = await getMachineInfo(payload);

    if (res.code === 200) {
      showSuccToast("添加成功");
    }
  };

  // useEffect(() => {
  //   postUserInfo();
  // }, []);

  useDidShow(() => {
    postUserInfo();
  });

  return (
    <View className="g_my">
      <View className="my_hd">
        <Image
          width={56}
          height={56}
          src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
          className="avatar"
        />

        <View className="nick">
          {Taro.getStorageSync("userInfo")
            ? Taro.getStorageSync("userInfo").phone
            : ""}
        </View>
      </View>
      <View className="my_bd">
        <Cell.Group className="my_list">
          <Cell
            className="my_item"
            title={
              <View className="title">
                <Image
                  width={20}
                  height={20}
                  src={IconAdd}
                  className="icon_add"
                />
                <View className="label">添加机器</View>
              </View>
            }
            extra={
              <Image
                src={IconArrowRight}
                width={20}
                height={20}
                className="icon_arrow_r"
              />
            }
            onClick={() => {
              Taro.scanCode({
                // 只允许相机
                // onlyFromCamera: true,
                success: (res) => {
                  const { result, errMsg, rawData, scanType } = res;
                  // console.log(res);
                  postAddMachine(result);
                },
              });
            }}
          />
          <Cell
            className="my_item"
            title={
              <View className="title">
                <Image
                  width={20}
                  height={20}
                  src={IconKefu}
                  className="icon_kefu"
                />
                <View className="label">联系客服</View>
              </View>
            }
            extra={<View className="tel">400-000-000</View>}
            onClick={() => {
              Taro.makePhoneCall({
                phoneNumber: "400-000-000",
              });
            }}
          />
        </Cell.Group>
      </View>
      <View className="my_ft">
        <Button className="btn_logout" onClick={() => setShowModal(11)}>
          退出登录
        </Button>
      </View>

      {showModal === 11 ? (
        <Dialog
          title={`提示信息`}
          visible={showModal === 11}
          onConfirm={() => {
            Taro.removeStorageSync("userInfo");
            Taro.removeStorageSync("token");
            Taro.redirectTo({
              url: "/pages/login/login",
            });
          }}
          onCancel={() => {
            setShowModal(0);
          }}
          className="logout_modal"
        >
          <View className="trip">您确定要退出登录吗？</View>
        </Dialog>
      ) : null}
    </View>
  );
}

export default My;
